<template>
  <div class='location'>
    <van-nav-bar
      title="城市列表"
      left-arrow
      @click-left="onClickLeft"
      class="login"
      :fixed='true'
      >
   </van-nav-bar>
   <van-index-bar :index-list='indexListnow' class="hot">
  <van-index-anchor >当前城市</van-index-anchor>
  <van-cell title="上海"/>
</van-index-bar>
<van-index-bar :index-list='indexList' >
  <van-index-anchor >热门城市</van-index-anchor>
  <van-cell :title="item.label" v-for='item in hotcity' :key='item.label'/>
</van-index-bar>
 <div >
   <van-index-bar v-for='item in lettercity' :key='item.index' >
  <van-index-anchor :index='item[0].short[0].toUpperCase()'  />
  <van-cell :title="list.label" v-for='list in item' :key='list.label' />
  </van-index-bar>
</div>
   </div>
</template>
 
<script>
import {hot,citys} from '@/api/users'
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      cityarr:[],
      hotcity:[],
      lettercity:[],
      indexList:['热'],
      indexListnow:['#']
    };
  },
  computed: {},
  watch: {},
  async created() {
    const {body:data}=await hot()
    console.log(data);
    this.hotcity=data
    // console.log(this.hotcity);
    
    const {body}=await citys()
    // console.log(body);
    const cityname=body.map(item=>{return item.short[0].toUpperCase()}).filter((item,index,cityname)=>{
  return index===cityname.indexOf(item)
}).sort()
 this.cityarr=cityname
//  console.log(cityname);

const city2=cityname.map(item => {
  return item.toLowerCase()
});
// console.log(city2);
 const datasList=body.map((item,index,self)=>{
   return self.filter(list=>{
  if(item.short[0]===list.short[0]){
    item.datas=[]
   return item.datas.push(list)
  }
})
})
// console.log(datasList);
for(let i=0;i<datasList.length;i++){
  for(let j=i;j<datasList.length;j++){
    if(datasList[j][0]===datasList[i][0]){
      // console.log(datasList[i]);
      
       datasList.splice(j,1)
    }
}}
// console.log(datasList);




this.lettercity=datasList.sort((a,b)=>{
  const shortA=a[0].short[0].toUpperCase()
  const shortB=b[0].short[0].toUpperCase()
  if(shortA<shortB){
    return -1
  }
   if(shortA>shortB){
    return 1
  }
  if(shortA===shortB){
    return 0
  }
})
// console.log(this.lettercity);

    
  },
  methods: {
    onClickLeft(){
      this.$router.go(-1)
    }
  },
};
</script>

<style scoped lang='less'>
.location{
  text-align: left;
 .login{
      background-color: #1cb676;
      z-index:2;
      // margin-bottom:60px;
     }
     .hot{
      margin-top:60px;
     }

     
}
    
</style>